<template>
  <div style="overflow: hidden;   ">
    <div class="box_title">
      <img
        src="../../assets/personal/images/dp.png"
        style="width:17px;height:17px;margin-right:10px;"
      >
      温馨提示:提现金额需要≥100元，预计24小时内到账
    </div>
    <div class="box_msg">
      <div class="msg_title">提现金额</div>
      <div class="msg_box">
        <label for="money_in">￥</label>
        <input type="number" placeholder="请输入提现金额" id="money_in" v-model="jine">
      </div>
    </div>
    <div class="box_text">
      当前余额{{this.money|amountMin100(2)}}元,
      <span @click="quanti()">全部提现</span>
    </div>

    <ul class="tixianway">
      <!-- <li class="vx" @click="CLrewardStatus" style="overflow:hidden;"> -->
        <li class="vx" style="overflow:hidden;">
        <img src="../../assets/personal/images/wx.png" style="float:left;">
        <strong style="float:left;">提现到微信钱包</strong>
        <span :class="{active:1==rewardStatus}"></span>
      </li>
      <!-- <li id="ThecardID" @click="show" v-if="CashList.length>0" style="overflow:hidden;">
        <img
          v-if="!bankCardId"
          src="../../assets/personal/images/yinlian.png"
          style="float:left; margin-top:5px;"
        >
        <img
          v-else
          :src="require('../../assets/bank/small_logo/'+bankAbbreviation+'.png')"
          style="float:left;  margin-top:5px;"
        >
        <strong style="float:left;">{{bankName}}{{bankId | capitalize4}}</strong>
      </li>
      <li id="ThecardID" @click="href_tx" v-else style="overflow:hidden;">
        <img
          v-if="!bankCardId"
          src="../../assets/personal/images/yinlian.png"
          style="float:left; margin-top:5px;"
        >
        <img
          v-else
          :src="require('../../assets/bank/small_logo/'+bankAbbreviation+'.png')"
          style="float:left;  margin-top:5px;"
        >
        <strong style="float:left;">请绑定银行卡</strong>
      </li> -->
    </ul>

    <div class="zzc" v-show="show_czz" @click="show_yz">
      <div class="list">
        <ul>
          <li
            v-for="item in CashList"
            :key="item.id"
            @click="Theselected(item.bankId,item.id,item.bankAbbreviation,item.bankName)"
          >
            <img :src="require('../../assets/bank/small_logo/'+item.bankAbbreviation+'.png')">
            {{item.bankName }}({{item.bankId | capitalize4}})
          </li>
          <li @click="newka()">添加新银行卡</li>
        </ul>
      </div>
    </div>

    <div class="bom_btn">
      <router-link to @click.native="tixian()">提现</router-link>
    </div>
    <div class="pwd" v-show="pwdstyle">
      <div class="pwd_kuang" v-if="1==pwdType">
        <div class="pwdkuang_head">
          <img @click="cloicepwd" src="../../assets/personal/images/close-icon.png">请输入支付密码
        </div>
        <div class="pwdkuang_mind">
          <h1>首象共享</h1>
          <h2>￥{{amount}}</h2>
        </div>
        <div class="pwd_text">
          <input
            ref="pwd"
            type="password"
            maxlength="6"
            v-model="passWord"
            style="position: absolute;z-index: -1;left:-100%;opacity: 0"
          >
          <ul class="pwd-wrap" @click="focus">
            <li>
              <i v-if="msgLength > 0"></i>
            </li>
            <li>
              <i v-if="msgLength > 1"></i>
            </li>
            <li>
              <i v-if="msgLength > 2"></i>
            </li>
            <li>
              <i v-if="msgLength > 3"></i>
            </li>
            <li>
              <i v-if="msgLength > 4"></i>
            </li>
            <li>
              <i v-if="msgLength > 5"></i>
            </li>
            <div class="clearfix"></div>
          </ul>
          <div class="wjmm">
            <router-link :to="{name:'accounts_security'}">忘记了密码?</router-link>
          </div>
        </div>
      </div>
      <div class="pwd_kuang1" v-else>
        <p>您还未设置平台交易密码，请先设置</p>
        <a href="/wap/gxt/accounts_security">设置平台交易密码</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      money: "",
      jine: "",
      pwdstyle: false,
      pwdType: "",
      amount: "",
      msgLength: 0,
      passWord: "",
      //    1是微信 ，2是银行卡
      rewardStatus: 1,
      CashList: [],
      bankCardId: "",
      bankName: "银联卡",
      bankId: "",
      show_czz: false,
      rewardId: ""
    };
  },
  mounted() {
    this.info();
  },
  methods: {
    newka() {
      this.$router.push({ name: "add_bank_card" });
    },
    Theselected: function(bankId, id, bankAbbreviation, name) {
      //LOGO
      this.bankName = name;
      this.bankId = bankId;
      this.bankAbbreviation = bankAbbreviation;
      this.bankCardId = id;
      this.rewardStatus = 2;
      this.show_czz = !this.show_czz;
      console.log("卡" + bankId);
      console.log("i" + id);
      console.log("n" + bankAbbreviation);
    },
    show_yz() {
      this.show_czz = false;
    },
    href_tx() {
      let vm = this;
      layer.confirm(
        "您还未绑定银行卡，请前去绑定银行卡？",
        {
          btn: ["确定", "取消"] //按钮
        },
        function() {
             layer.close(layer.index);
          vm.$router.push({ name: "add_bank_card" });
        }
      );
    },
    show() {
      this.show_czz = !this.show_czz;
    },
    CLrewardStatus() {
      this.rewardStatus = 1 == this.rewardStatus ? 2 : 1;
    },
    info() {
      this.money = this.$route.query.money;
      console.log(this.money);
      this.$http
        .get(this.APIURL_PREFIX + "/api/wap/accounts/sysPwd")
        .then(response => {
          console.log(response);
          if (response.data.msg == "该用户以设置交易密码") {
            this.pwdType = 1;
          } else {
            this.pwdType = 2;
          }
        });
      this.$http
        .get(this.APIURL_PREFIX + "/api/wap/bankCardBag")
        .then(response => {
          this.CashList = response.data.data;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    quanti() {
      this.jine = this.money / 100;
    },
    tixian() {
      if (this.pwdType == 1) {
        if (this.jine == "") {
          layer.msg("请设置提现金额");
          return;
        } 
        else if (this.jine < 100) {
          layer.msg("最少提现一百元");
          return;
        }
         else if (this.jine > this.money) {
          layer.msg("您填写的金额超出总额度");
          return;
        } else {
          console.log(8888);
          this.amount = this.jine;
          this.pwdstyle = true;
        }
      } else {
        console.log("未设置交易密码");
        this.pwdstyle = true;
      }
    },
    cloicepwd() {
      this.pwdstyle = false;
    },
    focus() {
      this.$refs.pwd.focus();
    }
  },
  watch: {
    passWord(curVal) {
      console.log(curVal);
      console.log(
        this.rewardStatus,
        this.bankCardId,
        this.bankName,
        this.bankId
      );
      if (/[^\d]/g.test(curVal)) {
        this.passWord = this.passWord.replace(/[^\d]/g, "");
      } else {
        this.msgLength = curVal.length;
      }
      if (this.pwdType == 1) {
        if (this.msgLength > 5) {
          console.log("完成");
          console.log(this.passWord);
          this.$http
            .post(
              this.APIURL_PREFIX + "/api/wap/accounts/validatePwd",
              $.param({ passWord: this.passWord })
            )
            .then(response => {
              console.log(response);
              if (response.data.code == 0) {
                this.$http
                  .post(
                    this.APIURL_PREFIX + "/api/accounts/reward",
                    $.param({
                      rewardType: 1,
                      // rewardStatus: this.rewardStatus,
                       rewardStatus:1,
                      amount: this.amount * 100,
                      // bankCardId: this.bankCardId,
                      // bankId: this.bankId
                    })
                  )
                  .then(response => {
                    console.log(response);
                    if (response.data.code == 0) {
                      layer.msg("提现成功");
                      this.pwdstyle = false;
                      this.passWord = "";
                      this.jine = "";
                      this.rewardId = response.data.data.rewardId;
                      console.log(this.rewardId,this.bankId)
                      //  this.$http
                  // .put(
                  //   this.APIURL_PREFIX + "/api/admin/rewardsToBank",
                  //   $.param({
                  //     rewardId:this.rewardId,
                  //     id:this.bankCardId
                  //   })
                  // )
                  // .then(response => {
                  //     console.log(response)
                  // })


                      this.$router.push({
                        name: "withdrawalstate",
                        query: { rewardId: this.rewardId, newcan: 1 }
                      });
                    } else {
                      layer.msg(response.data.msg);
                      this.pwdstyle = false;
                      this.passWord = "";
                    }
                  });
              } else {
                layer.msg(response.data.msg);
                this.pwdstyle = false;
                this.passWord = "";
              }
            });
        }
      }
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/money_tixian.css";
</style>
